/**
 * 表单
 * 【受控组件】渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。
 * textarea 的值在 value 中设置
 * select 默认选中要在 select 的 value 属性中设置，没有selected属性
 * <input type="file"> 是只读的，所以是非受控组件
 * 【formik】插件，包含验证、追踪访问字段以及处理表单提交的完整解决方案
 */
import React from 'react';

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      file: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }
  handleSubmit(event) {
    alert('提交的名字：' + this.state.value);
    event.preventDefault();
  }
  handleFile(e) {
    console.log(e);
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字：
          <input type='text' value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type='submit' value='提交' />
        <br />
        <input type='file' value={this.state.file} onChange={this.handleFile} />
      </form>
    );
  }
}
export default NameForm;